<!--
 * @Author: Wayne 13235388225@163.com
 * @Date: 2023-10-13 10:36:17
 * @LastEditors: Wayne 13235388225@163.com
 * @LastEditTime: 2023-10-13 11:16:47
 * @FilePath: \Jkc-app-front-new\src\views\withdrawalMethod\withdrawalMethod.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="view-title">提现方式管理</div>
    <el-button
      type="primary"
      size="mini"
      @click="handlerAdd"
      v-permission="['withdrawalMethod:add']"
      >新增</el-button
    >

    <el-table
      :data="methodTableData"
      v-loading="loading"
      element-loading-text="正在加载中"
      :header-cell-style="{
        borderColor: '#F0F0F0',
        height: '51px',
        background: '#F0F0F0',
        color: '#333',
      }"
      :row-style="{ height: '51px' }"
      :cell-style="{ borderColor: '#F0F0F0' }"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="name" label="支付方式" align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" align="center">
      </el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog
      title="新增"
      :visible.sync="methodDialogVisible"
      width="30%"
      @close="handleCloseDialog"
    >
      <div class="dialog_method_box">
        <div class="dialog_name_box">
          <div class="name_title">支付方式：</div>
          <div class="name_input">
            <el-input
              v-model="nameValue"
              placeholder="请输入支付方式"
            ></el-input>
          </div>
        </div>

        <div class="dialog_img_box">
          <div class="img_box">上传图标：</div>
          <div class="">
            <el-upload
              style="margin-right: 30px"
              class="upload-demo"
              :action="uploadMainImgUrl"
              :on-success="onSuccessFile"
              :on-error="onErrorFile"
              :data="{ type: '6' }"
              list-type="text"
            >
              <el-button size="small" type="primary">上传图标</el-button>
            </el-upload>
            <span v-if="mainImg">
              <img
                :src="mainImg"
                alt=""
                class="main_img_box"
                @click="handlerMainImg(file)"
              />
            </span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogMethod">取 消</el-button>
        <el-button type="primary" @click="sureDialogMethod">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAppGetpayTypeList,
  addAppGetpayType,
} from "@/api/withdrawalMethod.js";
export default {
  data() {
    return {
      pageNow: 1,
      pageSize: 10,
      total: null,
      methodTableData: [],
      methodDialogVisible: false,
      nameValue: "",
      uploadMainImgUrl: process.env.VUE_APP_BASE_API + "/app/uploadFiles", // 主图url
      mainImg: "",
      loading: true,
    };
  },
  mounted() {
    this.getAppGetpayTypeList();
  },
  methods: {
    // 获取全部提现方式
    getAppGetpayTypeList() {
      getAppGetpayTypeList({
        page_now: this.pageNow,
        page_size: this.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.loading = false;
          this.methodTableData = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.loading = false;
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 新增提现方式(未测试)
    addAppGetpayType() {
      addAppGetpayType({
        name: this.nameValue,
        img_url: this.mainImg,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.methodDialogVisible = false;
          this.getAppGetpayTypeList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 上传主图
    onSuccessFile(val) {
      this.mainImg = val.data.path;
    },
    onErrorFile(val) {},

    // 新增
    handlerAdd() {
      this.methodDialogVisible = true;
    },

    // 新增弹窗确定
    sureDialogMethod() {},

    // 新增弹窗取消
    cancelDialogMethod() {
      this.methodDialogVisible = false;
    },

    // 新增弹窗-叉号
    handleCloseDialog() {
      this.methodDialogVisible = false;
      this.nameValue = "";
      this.mainImg = "";
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAppGetpayTypeList();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pageSize = 10;
      this.getAppGetpayTypeList();
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog_method_box {
  .dialog_name_box {
    display: flex;
    align-items: center;
    padding-bottom: 20px;

    .name_title {
    }
  }

  .dialog_img_box {
    display: flex;
    align-items: center;
  }
}
</style>
